<template>
    <BlurCard :show="true" class="flex flex-col p-4 justify-evenly" @close="$emit('close')">
        <b class="text-4xl text-center text-cyan-400/90">创建文件</b>
        <Form
            @submit="createFile"
            validate-trigger="onBlur"
            input-align="center"
            error-message-align="center"
        >
            <cell-group inset>
                <Field
                    v-model="file.name"
                    name="name"
                    label="名称"
                    placeholder="请输入画板名称"
                    :rules="[{ required: true, message: '请填写画板名称', validator: checkName }]"
                />

                <Field name="width" label="宽">
                    <template #input>
                        <Stepper min="1" v-model="file.height" theme="round"></Stepper>
                    </template>
                </Field>
                <Field name="height" label="高">
                    <template #input>
                        <Stepper min="1" v-model="file.width" theme="round"></Stepper>
                    </template>
                </Field>
            </cell-group>
            <div class="m-4">
                <Button round block type="primary" native-type="submit" class="text-2xl m-4">创建文件</Button>
            </div>
        </Form>
    </BlurCard>
</template>

<style scoped>
</style>

<script lang="ts" setup>
import { Field, CellGroup, Stepper, Form, Button } from 'vant';
import { reactive } from 'vue';
import BlurCard from './BlurCard.vue'
import { useFileStore } from './files';

const $emit = defineEmits<{
    (event: "close"): void
}>()
const originData = {
    name: "",
    height: 64,
    width: 64
}
const file = reactive(originData)
const fileStore = useFileStore()
const createFile = ({ name, width, height }: typeof originData) => {

    fileStore.createFile(name, width, height)
    $emit('close')

}

const reg = {
    name: /[^\s\/:\*\?\\"<>\|](\x20|[^\s\/:\*\?\\"<>\|])*[^\s\\/:\*\?\\"<>\|\.]$/
}
const checkName = (fileName: string) => {
    if (fileName.length < 0 || fileName.length > 30) {
        return false;
    }
    return reg.name.test(fileName)
}
</script>